<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/common/base.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>考勤管理</title>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>/easyui/css/demo.css">
	<script type="text/javascript" src="<%=basePath%>/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>/easyui/js/validateExtends.js"></script>
	<script type="text/javascript">
		var clazzList = '${clazzList}';
		
		$(function() {	
			var table;
			var list = ${JsonClass};
			
			//datagrid初始化 
		    $('#dataList').datagrid({ 
		        title:'学生列表', 
		        iconCls:'icon-more',//图标 
		        border: true, 
		        collapsible:false,//是否可折叠的 
		        fit: true,//自动大小 
		        method: "post",
		        url:"<%=basePath%>/json/Attendance_list.action",
		        idField:'studentNo', 
		        singleSelect:false,//是否单选 
		        pagination:true,//分页控件 
		        rownumbers:true,//行号 
		        pageSize: 100,//每页显示的记录条数，默认为100
		        pageList: [30,50,100],//可以设置每页记录条数的列表 
	// 	        sortName:'studentNo',
	// 	        sortOrder:'DESC', 
		        remoteSort: false,
		        columns: [[  
					{field:'chk',checkbox: true,width:50},
	 		       {field:'studentNo',title:'学号',width:150, sortable: true},
	 		        {field:'studentName',title:'姓名',width:150, sortable: true},
	 		       {field:'classNo',title:'所属班级',width:150, sortable: true,
	 		        	formatter:function(value,index,row){
	 		        		for(var i=0;i<list.length;i++){
	 		        			if(list[i].classNo == value){
	 		        				return list[i].className;
	 		        			}
	 		        			console.log("name:" + list[i].className);
	 		        		}
	 		        		return value;
	 		    	   }
	 		        },
	 		       {field:'checkDate',title:'日期',width:150, sortable: true,},
	 		      {field: 'status', title: '出勤状态', width: 260, align: 'center',
	                 formatter: function (value, row, index) {
	                     var s = '正常<input name="' + index + '" type="radio" value="0" checked="checked"/>&nbsp;&nbsp;旷课<input name="' + index + '" type="radio" value="1"/>&nbsp;&nbsp;迟到<input name="' + index + '" type="radio" value="2"/>&nbsp;&nbsp;请假<input name="' + index + '" type="radio" value="3"/>&nbsp;&nbsp;早退<input name="' + index + '" type="radio" value="4"/>';
	                     return s;
	                 }}
		 		]], 
		        toolbar: "#toolbar"
		    }); 
		    //设置分页控件 
		    var p = $('#dataList').datagrid('getPager'); 
		    $(p).pagination({ 
		        pageSize: 100,//每页显示的记录条数，默认为10
		        pageList: [30,50,100],//可以设置每页记录条数的列表 
		        beforePageText: '第',//页数文本框前显示的汉字 
		        afterPageText: '页    共 {pages} 页', 
		        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录', 
		    }); 
		    //设置工具类按钮
		    $("#add").click(function(){
		    	table = $("#addTable");
		    	$("#addDialog").dialog("open");
		    });
		  
		    // 保存
		    $("#save").click(function(){
		    	var rows = $("#dataList").datagrid("getRows"); 
				var status = [];	
				for(var i = 0; i < rows.length; i++){
					status[i] = rows[i].studentNo;
	
					$("input:radio[name='" + i + "']:checked").each(function(){
						rows[i].status = $(this).val();
					});
				}
		    	$.messager.confirm("消息提醒", "确定要保存本次考勤记录？", function(r){
	        		if(r){
	        			$.ajax({
							type: "post",
							url: "<%=basePath%>/json/Attendance_save",
							data: {"data":JSON.stringify(rows),},
							dataType:'json',
							success: function(data){
								if(data.type == "success"){
									$.messager.alert("消息提醒","保存成功!","info");
									//刷新表格
									$("#dataList").datagrid("reload");
									$("#dataList").datagrid("uncheckAll");
								} else{
									$.messager.alert("消息提醒",data.msg,"warning");
									return;
								}
							}
						});
	        		}
	        	});
	
			    
		    });
	
		    
		  	//设置随机考勤窗口
		    $("#addDialog").dialog({
		    	title: "随机考勤",
		    	width: 400,
		    	height: 450,
		    	iconCls: "icon-add",
		    	modal: true,
		    	collapsible: false,
		    	minimizable: false,
		    	maximizable: false,
		    	draggable: true,
		    	closed: true,
		    	buttons: [
		    		{
						text:'添加',
						plain: true,
						iconCls:'icon-add',
						handler:function(){
							var validate = $("#addForm").form("validate");
							if(!validate){
								$.messager.alert("消息提醒","请检查你输入的数据!","warning");
								return;
							} else{
								var data = $("#addForm").serialize();
							}
						}
					},
				],
				onClose: function(){
					$("#add_type").textbox('setValue', "");
					$("#add_num").textbox('setValue', "");
				}
		    });
		   	
		  	
		  	//随机考勤按钮
		  	$("#search-btn").click(function(){
		  		$('#dataList').datagrid('reload',{
		  			num:$("#search-num").textbox('getValue'),
		  			classNo:$("#search-clazz-id").combobox('getValue')
		  		});
		  	});
		  //全部点名按钮
		  	$("#all_btn").click(function(){
		  		$('#dataList').datagrid('reload',{
		  			classNo:$("#search-clazz-id").combobox('getValue')
		  		});
		  	});
		  	
		
		});
	</script>
</head>
<body>
	<!-- 数据列表 -->
	<table id="dataList" cellspacing="0" cellpadding="0"> 
	    
	</table> 
	<!-- 工具栏 -->
	<div id="toolbar">
		<%-- <c:if test="${utype == 3}">
		<div style="float: left;"><a id="add" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">随机考勤</a></div>
			<div style="float: left;" class="datagrid-btn-separator"></div>
		</c:if>	 --%>
		随机考勤人数：<input id="search-num" class="easyui-textbox" />
		所属班级：
		<select id="search-clazz-id" class="easyui-combobox" style="width: 150px;">
			<option value="">全部</option>
			<c:forEach items="${clazzList}" var="clazz">
    			<option value="${clazz.classNo }">${clazz.className }</option>
    		</c:forEach>
		</select>
		<a id="all_btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">全部点名</a>
		<a id="search-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">随机考勤</a>
		<a id="save" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
	</div>
	
	<!-- 添加随机考勤窗口 -->
	<!-- <div id="addDialog" style="padding: 10px;">  
   		<form id="addForm" method="post">
	    	<table id="addTable2" cellpadding="6">
	    		<tr >
	    			<td>点名人数:</td>
	    			<td>
	    				<input id="add_num" name="num" class="easyui-textbox" style="width: 200px; height: 30px;" type="text"  data-options="required:true, missingMessage:'请填写点名人数'"  />
	    			</td>
	    		</tr>
	    	</table>
	    </form>
	</div> -->
	
</body>
</html>